<template>
  <div class="detail">
    <div class="img">
      <van-image lazy-load :src="film.poster" fit="cover" position="center" class="poster" />
    </div>
    <div class="film-detail">
      <div>{{ film.name }}</div>
      <div>{{ film.category }}</div>
      <div>{{ parsePremiereAt(film.premiereAt) }}上映</div>
      <div>{{ film.nation }} | {{ film.runtime }} 分钟</div>
      <div>
        {{ film.synopsis }}
      </div>
    </div>

    <h2 style="font-size: 16px; color: #666; margin: 10px">演职人员</h2>
    <swiper :slides-per-view="4" :space-between="50" class="swiper-box">
      <swiper-slide v-for="(item, index) in film.actors" :key="index" class="swiper-slide">
        <div>
          <van-image width="95px" height="95px" fit="cover" position="center" :src="item.avatarAddress" />
          <div style="
              font-size: 8px;
              width: 95px;
              text-align: center;
              margin-top: 12px;
            ">
            {{ item.name }}
          </div>
          <div style="
              font-size: 8px;
              width: 95px;
              text-align: center;
              margin-top: 5px;
            ">
            {{ item.role }}
          </div>
        </div>
      </swiper-slide>
    </swiper>

    <h2 style="font-size: 16px;color: #666;margin: 10px;">剧照</h2>
    <swiper :slides-per-view="2" :space-between="50" class="swiper-box">
      <swiper-slide v-for="(item, index) in film.photos" :key="index" class="swiper-slide" @click="showPreview(index)">
        <van-image width="195px" height="120px" fit="cover" position="center" :src="item" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { moiveDetailData } from "../api/api";
import { FilmType } from "../types/index";
import moment from "moment";
import $bus from "../config/eventBus";

import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";

import { ImagePreview } from 'vant';
import 'vant/es/image-preview/style';

// 获取传递的 电影的 id 值，一般情况下 router 是用来进行路由跳转使用
const router = useRouter();
console.log(router.currentRoute.value.params.id);

// 这里面的数据一定要和我们的 interface 接口约束保持一致
let film = ref<FilmType>({
  poster: "",
  name: "",
  category: "",
  premiereAt: "",
  nation: "",
  runtime: "",
  synopsis: ""
});

// 可以使用 route 来获取 参数值
const route = useRoute();
console.log(route.params.id);

$bus.emit("tabBarHide", false)

// 发出请求
onMounted(async () => {
  // 我们在 moiveDetailData 方法接收的参数是 string 类型
  let res = await moiveDetailData(route.params.id as string);
  console.log(res);
  film.value = res.data.film;
});

// 格式化时间
const parsePremiereAt = (value: string) => {
  return moment(parseInt(value) * 1000).format("YYYY年MM月DD日");
};

// 打开预览
const showPreview = (index: number) => {
  ImagePreview({
    images: film.value.photos as string[],
    startPosition: index,
    closeable: true,
    showIndicators: true
  })
}
</script>

<style scoped lang="scss">
.detail {
  padding-bottom: 80px;

  .poster {
    width: 100%;
    height: 250px;
  }

  .swiper-box {
    margin: 0 10px;
  }
}
</style>
